import React, { useState } from 'react';
import { Table, Space, Button, Switch, Image } from 'antd'
import { IPro } from './pro';
import './index.less'
export interface ITableListProps {
  dataSource: Array<IPro>
}

function TableList (props: ITableListProps) {
  const { dataSource } = props
  // 设定页码以及每页显示的条数
  const [ current, setCurrent ] = useState(1)
  const [ pageSize, setPageSize ] = useState(10)
  const columns: any = [
    {
      title: '序号',
      align: 'center',
      fixed: 'left',
      width: 80,
      render (text: number, record: IPro, index: number) { // 自定义单元格的内容
        return <span> { (current - 1) * pageSize + index + 1 }</span>
      }
    },
    {
      title: '产品名称',
      align: 'center', // 表格对齐方式
      fixed: 'left', // 固定列
      dataIndex: 'proname', // 显示字段
      width: 150
    },
    {
      title: '产品图片',
      align: 'center',
      fixed: 'left',
      dataIndex: 'img1',
      width: 200,
      render (text: string) {
        return <Image src={text} width = { 50 } height= { 50 } />
      }
    },
    {
      title: '产品原价',
      align: 'center',
      width: 160,
      dataIndex: 'originprice',
      sorter (a: IPro, b: IPro) {
        return a.originprice - b.originprice
      }
    },
    {
      title: '折扣',
      align: 'center',
      width: 160,
      dataIndex: 'discount'
    },
    {
      title: '销量',
      align: 'center',
      width: 160,
      dataIndex: 'sales',
      sorter (a: IPro, b: IPro) {
        return a.sales - b.sales
      }
    },
    {
      title: '库存',
      align: 'center',
      width: 160,
      dataIndex: 'stock',
      sorter (a: IPro, b: IPro) {
        return a.stock - b.stock
      }
    },
    {
      title: '是否售卖',
      align: 'center',
      fixed: 'right',
      width: 160,
      dataIndex: 'issale',
      render (text: number) {
        return (
          <Switch disabled className = "sales_switch" checked = { text === 1 } onChange={ () => {} } />
        )
      }
    },
    {
      title: '是否推荐',
      align: 'center',
      fixed: 'right',
      width: 160,
      dataIndex: 'isrecommend',
      render (text: number) {
        return (
          <Switch disabled className = "recommend_switch" checked = { text === 1 } onChange={ () => {} } />
        )
      }
    },
    {
      title: '是否秒杀',
      align: 'center',
      fixed: 'right',
      width: 160,
      dataIndex: 'isseckill',
      render (text: number) {
        return (
          <Switch disabled className = "seckill_switch" checked = { text === 1 } onChange={ () => {} } />
        )
      }
    },
    {
      title: '操作',
      fixed: 'right',
      width: 240,
      align: 'center',
      render (): React.ReactNode {
        return (
          <Space>
            <Button type="ghost">编辑</Button>
            <Button danger>删除</Button>
          </Space>
        )
      }
    }
  ]
  // rowKey 每一条数据的key值
  // scroll 固定头和列用的
  return (
    <Table
      dataSource={dataSource}
      rowKey="proid"
      columns={columns}
      scroll={{ x: 1300, y: 740 }}
      pagination = { {
        position: ['bottomRight'],
        current,
        pageSize,
        showQuickJumper: true,
        // pageSizeOptions: ['1', '2', '3', '4'],
        onChange: (page, pageSize) => {
          setCurrent(page)
          setPageSize(Number(pageSize))
        }
      } } />
  );
}
export default TableList

